<template>
  <div>
    <Descriptions
      labelAlign="right"
      key="datum"
      title="入职信息"
      :data="emp"
      minWidth="200px"
      :schema="baseScheme"
    />
    <Descriptions
      v-if="scheme"
      key="user"
      title="个人资料"
      minWidth="200px"
      labelAlign="right"
      :data="emp"
      :schema="scheme"
    />
  </div>
</template>

<script>
import { HrItemDic, HrEnumDic } from '@/config/publicDic'
import { Descriptions } from '@/components/Descriptions'
import { getData } from '@/api/emp/emp'
import { enumDicItem, dictItem } from '@/components/base'
import { deptSelect } from '@/components/unit'
import { h, readonly } from 'vue'
import { ElSpace } from 'element-plus'
import { formatFileUri, formatTime } from '@/utils'
export default {
  components: {
    Descriptions
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      emp: {},
      scheme: null,
      baseScheme: []
    }
  },
  computed: {},
  watch: {
    id: {
      handler(val) {
        if (val != null) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    initScheme() {
      this.baseScheme = [
        {
          field: 'EmpName',
          label: '员工名'
        },
        {
          field: 'EmpNo',
          label: '员工编号'
        },
        {
          field: 'Sex',
          label: '性别',
          slots: {
            default: () => {
              return h(enumDicItem, {
                modelValue: this.emp.Sex,
                readonly: true,
                dicKey: HrEnumDic.hrUserSex,
                placeholder: '性别'
              })
            }
          }
        },
        {
          field: 'DeptId',
          label: '入职部门',
          slots: {
            default: () => {
              return h(deptSelect, {
                modelValue: this.emp.DeptId,
                readonly: true,
                placeholder: '入职部门'
              })
            }
          }
        },
        {
          field: 'Post',
          label: '入职岗位',
          slots: {
            default: () => {
              if (this.emp.Post == null) {
                return null
              }
              return h(
                ElSpace,
                this.emp.Post.map((c) => {
                  return h('span', c)
                })
              )
            }
          }
        },
        {
          field: 'Title',
          label: '入职职务',
          slots: {
            default: () => {
              if (this.emp.Title == null) {
                return null
              }
              return h(
                ElSpace,
                this.emp.Title.map((c) => {
                  return h('span', c)
                })
              )
            }
          }
        },
        {
          field: 'UserType',
          label: '员工类型',
          slots: {
            default: () => {
              return h(enumDicItem, {
                modelValue: this.emp.UserType,
                readonly: true,
                dicKey: HrEnumDic.hrUserType,
                placeholder: '员工类型'
              })
            }
          }
        },
        {
          field: 'Show',
          label: '备注说明',
          span: 4
        }
      ]
      this.scheme = [
        {
          field: 'UserHead',
          label: '头像',
          rowspan: 4,
          slots: {
            default: () => {
              if (this.emp.UserHead == null) {
                return null
              }
              return h('img', {
                src: formatFileUri(this.emp.UserHead),
                width: '120px'
              })
            }
          }
        },
        {
          field: 'Phone',
          label: '手机号'
        },
        {
          field: 'BackupPhone',
          label: '备用联系电话'
        },
        {
          field: 'Nation',
          label: '名族',
          slots: {
            default: () => {
              return h(dictItem, {
                modelValue: this.emp.Nation,
                readonly: true,
                dicId: HrItemDic.nation,
                placeholder: '名族'
              })
            }
          }
        },
        {
          field: 'IDCard',
          label: '身份证号'
        },
        {
          field: 'Birthday',
          label: '生日',
          slots: {
            default: () => {
              return formatTime(this.emp.Birthday, 'yyyy-MM-dd')
            }
          }
        },
        {
          field: 'Email',
          label: 'Email'
        },
        {
          field: 'Address',
          label: '住址'
        }
      ]
    },
    async reset() {
      const res = await getData(this.id)
      this.emp = res
      this.$nextTick(this.initScheme)
      this.$emit('load', res)
    }
  }
}
</script>
